<template>

    <div class="aaa">
        <el-row>
            <el-input v-model="article.title"  placeholder="添加文章标题"></el-input>
        </el-row>
          <el-row>
            <el-input v-model="article.author"  placeholder="作者"></el-input>
        </el-row>
        <el-row class="select">
              <el-select v-model="article.type" placeholder="请选择课程" >
                <el-option v-for="item in $store.state.classType.classtype " :key="item.id" :label="item.type" :value="item.type"></el-option>
            </el-select>
        </el-row>
    
        <el-row class="editor">
            <Editor :onChangeContent="changeContent"></Editor>
        </el-row>
        <el-row>
            <el-button @click="createArticle" >创建文章</el-button>
        </el-row>
        </div>
</template>

<script>
   import {addArticle} from "@/api/article"
    export default {
        data(){
            return {
                article:{
                    title:"",
                    author:"",
                    type:"",
                    content:""
                }
            }
        },
        methods: {
            changeContent(html){
                this.article.content = html
            },
            
            createArticle(){
                console.log(this.article,"article")

                addArticle(this.article).then(res=>{
                    alert("创建成功")
                    console.log(res,"res-article")
                    this.article.title=""
                    this.article.author=""
                    this.article.type=""
                })
            }
        },
    }
</script>

<style >

.select{
    z-index:5 !important;
}
.editor{
    z-index:4 !important;
}

#content>div{
    z-index:2 !important;
}
</style>